<template>
  <div>
    <a-radio-group v-model="getBarType" button-style="solid">
      <template v-for="graphType in graphTypeDictOptions">
        <a-radio-button :key="graphType.value" :value="graphType.value">{{graphType.text}}</a-radio-button>
      </template>
    </a-radio-group>
    <pie @click="handleChartClick(arguments,'pie')" v-if="getBarType === 'pie'" :dataSource="chartData" :field="head.yaxisField.split(',')[0]" :dimension="head.xaxisField"></pie>
    <bar-multid @click="handleChartClick(arguments,'bar')" v-else-if="getBarType === 'bar'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')"></bar-multid>
    <transverse-bar-muiltid @click="handleChartClick(arguments,'transverseBar')" v-else-if="getBarType === 'transverseBarMuiltid'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')"></transverse-bar-muiltid>
    <radar @click="handleChartClick(arguments,'radar')" v-else-if="getBarType === 'radar'" :dataSource="chartData" :fields="head.yaxisField.split(',')" :xaxisField="head.xaxisField"></radar>
    <line-chart-multid @click="handleChartClick(arguments,'line')" v-else-if="getBarType === 'line'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')" ></line-chart-multid>
    <funnel @click="handleChartClick(arguments,'funnel')" v-else-if="getBarType === 'funnel'" :dataSource="chartData" :field="head.yaxisField.split(',')[0]" :dimension="head.xaxisField" ></funnel>
  </div>
</template>

<script>
// import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import Pie from '@/components/chart/Pie'
import BarMultid from '@/components/chart/BarMultid'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransverseBarMuiltid from '@/components/chart/TransverseBarMuiltid'
import Radar from '@/components/chart/Radar'
import Funnel from '@/components/chart/Funnel'
export default {
  name: 'TabGraphreportAutoChart',
  components: {
    Pie,
    LineChartMultid,
    TransverseBarMuiltid,
    Radar,
    BarMultid,
    Funnel
  },
  props: ['chartData', 'head', 'graphTypeDictOptions'],
  computed: {
    getBarType: {
      get: function() {
        return this.barType ? this.barType : this.graphTypeDictOptions[0] && this.graphTypeDictOptions[0].value
      },
      set: function(value) {
        this.barType = value
      }
    }
  },
  data() {
    return {
      barType: ''
    }
  },
  methods: {
    handleChartClick(msg, type) {
      if (this.head.extendJs) {
        this.chartClick(type, msg)
      }
    },
    chartClick(type, msg) {
      var onClick = {}
      eval(this.head.extendJs)
      if (onClick && onClick[type]) {
        onClick[type].call(this, msg)
      }
    }
  }
}
</script>
<style scoped>

</style>
